<template>
    <div class="bar-container" ref="container"></div>
</template>
<script>
    export default {
        name: 'bar',
        data() {
            return {
                echarts: null
            }
        },
        props: {
            config: Object
        },
        methods: {
            /**
             * 初始化Echarts图表
             * */
            initEcharts() {
                let echart = this.$echarts.init(this.$refs.container);
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['', ''],
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        boundaryGap: false
                    },
                    yAxis: {
                        min: this.config.min,
                        max: this.config.max,
                        type: 'value',
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false},
                        axisLabel: {show: false}
                    },
                    grid: {
                        left: '1%',
                        bottom: '20%',
                        containLabel: true
                    },
                    graphic: [
                        {
                            type: 'text',
                            left: '1%',
                            bottom: '10%',
                            style: {
                                font: 'bolder 0.9em "Microsoft YaHei", sans-serif',
                                fill: this.config.color,
                                text: this.config.en
                            }
                        },
                        {
                            type: 'text',
                            bottom: '40%',
                            left: '10%',
                            style: {
                                font: 'bolder 0.8em "Microsoft YaHei", sans-serif',
                                fill: this.config.color,
                                text: this.config.zh
                            }
                        },
                        {
                            type: 'text',
                            bottom: '30%',
                            left: '10%',
                            style: {
                                font: 'bolder 0.8em "Microsoft YaHei", sans-serif',
                                fill: this.config.color,
                                text: this.config.value + '（' + this.config.level + '）'
                            }
                        },
                        {
                            type: 'text',
                            bottom: '20%',
                            left: '10%',
                            style: {
                                font: 'bolder 0.8em "Microsoft YaHei", sans-serif',
                                fill: this.config.color,
                                text: this.config.min + '~' + this.config.max + this.config.unit
                            }
                        }
                    ],
                    series: [
                        {
                            data: [this.config.value],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            barWidth: 15,
                            itemStyle: {
                                color: this.config.color
                            },
                        }
                    ]
                };
                // 绘制图表
                echart.setOption(option);
                this.echarts = echart;
            }
        },
        mounted() {
            this.initEcharts();
        }
    }
</script>

<style scoped>
    .bar-container {
        width: 100%;
        height: 100%;
    }
</style>
